<!-- 1 定义组件模版 --> 
<template>
    <div class="student">
       学生xxx,学号：{{ number }} ,<button type="button" @click="signUp(number)">我要报名</button>
 
       <ul>
          <li v-for="msg in  allMsg">
             已发布消息：{{ msg }}
          </li>
       </ul>
    </div>
 </template> 
 
 <!-- 2 定义组件逻辑 -->
 <script setup lang="ts" name="Student">
 import { inject, ref } from 'vue'
 
 defineProps(['number'])
 
 const allMsg = inject('allMsg',[''])
 const signUp = inject('signUp',new Function())
 
 
 </script> 
  
 <!-- 3 定义样式 -->
 <style scoped> .student {
     display: inline-block;
     width: 300px;
     height: 300px;
     border: solid 1px grey;
     border-radius: 3px;
     background-color: azure;
     margin: 5px 10px;
  }
 </style>